<template>
  <div class="vs-left-box">
    <dv-border-box-1>
      <div class="line-chart">
        <VsLoading :show.sync="showLoading"></VsLoading>
        <VsPieChart :series="barData.series"></VsPieChart>
      </div>
      <div class="bar-chart">
        <VsLoading :show.sync="showLoading"></VsLoading>
        <VsBarChart :xAxis="lineData.xAxis" :series="lineData.series"></VsBarChart>
      </div>
    </dv-border-box-1>
    <dv-border-box-12>
      <centerLeft1 />
    </dv-border-box-12>
  </div>
</template>

<script>
import VsPieChart from '@c/charts/VsPieChart';
import VsBarChart from '@c/charts/VsBarChart';
export default {
  components:{
    VsPieChart,
    VsBarChart
  },
  data() {
    return {
      showLoading:true,
      barData:{
      series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [20, 60],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
            ]
        }]
      },
      lineData: {
        xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [12,234,566,134],
          },
        ],
      },
    };
  },
  mounted() {
  },
  methods: {
    setData(){
      setTimeout(()=>{
        this.showLoading = true;
        this.lineData.series[0].data = [22101, 532, 2030, 3344];
      },800)
    }
  },
};
</script>

<style lang="less" scoped>
.vs-left-box {
  width: 30%;
  height: 100%;
  float: left;
 
  .line-chart{
    position: relative;
    float:left;
    width:50%;
    height:300px;
    padding:20px;
  }
  .bar-chart{
    position: relative;
    float:left;
    width:50%;
    height:300px;
     padding:20px;
  }
}
</style>
